<template>
  <div>
    <h1>动态(Dynamic)组件</h1>
    <button @click="DongTai = 'UserName'">账号密码填写</button>
    <button @click="DongTai = 'UserInfo'">个人信息填写</button>
    <p>下面显示注册组件-动态切换:</p>
    <div style="border: 1px solid red;">
      <!-- 放动态组件的结构 -->
      <!-- 保持活着 -> 组件缓存 -->
      <keep-alive>
        <component :is="DongTai"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
// 目标: 动态组件 - 切换组件显示
// 场景: 同一个挂载点要切换 不同组件 显示
// 1. 新建 一样
// 2. 导入 一样
// 3. 注册 一样
// 4. 使用 不一样： 🔔 通过 <component is=""></component> 使用组件
// 5. 点击按钮-切换 DongTai 的值为要显示的组件名
import UserName from "./components/UserName.vue";
import UserInfo from "./components/UserInfo.vue";
export default {
  data() {
    return {
      DongTai: "UserName",
    };
  },
  components: {
    UserName,
    UserInfo,
  },
};
</script>

<style>
</style>